<template>
  <div class="dashboard">
    <!-- 欢迎卡片轮播 -->
    <el-card class="welcome-card animate-card">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Grid /></el-icon>
          <span class="header-title">欢迎使用Tools</span>
        </div>
      </template>

      <el-carousel
          height="140px"
          autoplay
          :interval="4000"
          arrow="always"
          indicator-position="outside"
      >
        <el-carousel-item v-for="(item, index) in devBenefits" :key="index">
          <div class="carousel-card">
            <span class="emoji">{{ item.emoji }}</span>
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </el-card>

    <!-- 技术栈展示保持原样 -->
    <el-row :gutter="20" class="tech-row">
      <el-col :xs="24" :sm="12">
        <el-card class="tech-card animate-card" shadow="hover">
          <div class="tech-title">前端技术栈</div>
          <div class="tags">
            <span class="tech-tag">Vue3</span>
            <span class="tech-tag">Vite</span>
            <span class="tech-tag">TypeScript</span>
            <span class="tech-tag">Element Plus</span>
            <span class="tech-tag">Pinia</span>
            <span class="tech-tag">Vue-Router</span>
            <span class="tech-tag">Axios</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="tech-card animate-card" shadow="hover">
          <div class="tech-title">后端技术栈</div>
          <div class="tags">
            <span class="tech-tag">Java 17</span>
            <span class="tech-tag">Spring Boot</span>
            <span class="tech-tag">Spring Security</span>
            <span class="tech-tag">Spring cache</span>
            <span class="tech-tag">MyBatis Plus</span>
            <span class="tech-tag">Hutool</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 核心能力模块保持原样 -->
    <el-row :gutter="20" class="feature-row">
      <el-col :xs="24" :sm="8" v-for="feature in features" :key="feature.title">
        <el-card class="feature-card animate-card" shadow="hover">
          <div class="icon-circle">
            <el-icon class="feature-icon">
              <component :is="feature.icon" />
            </el-icon>
          </div>
          <div class="feature-title">{{ feature.title }}</div>
          <div class="feature-desc">{{ feature.desc }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { Grid, Lock, DataAnalysis, RefreshRight } from "@element-plus/icons-vue";

const appTitle = import.meta.env.VITE_APP_TITLE || "Tools 系统";

// 开发者价值点
const devBenefits = [
  { emoji: "⚡", title: "快速开发", desc: "通用增删改查接口 + 前后端分离架构，减少重复工作" },
  { emoji: "🛡", title: "安全可靠", desc: "内置权限控制、数据权限和校验机制，开发无后顾之忧" },
  { emoji: "🚀", title: "高效维护", desc: "支持缓存、树形转换、数据关联校验，降低维护成本" },
  { emoji: "🧩", title: "可扩展", desc: "模块化设计，快速集成业务功能，迭代更轻松" },
];

// 核心能力模块
const features = [
  { icon: Lock, title: "权限控制", desc: "支持角色权限、数据权限，灵活配置访问控制" },
  { icon: DataAnalysis, title: "通用接口", desc: "支持权限、数据权限、数据校验、重复性校验、被使用校验、关联删除" },
  { icon: RefreshRight, title: "缓存与优化", desc: "支持缓存，加速接口响应与数据加载" },
];
</script>

<style scoped>
.dashboard {
  padding: 24px;
  min-height: 100vh;
  background: linear-gradient(120deg, #f5f7fa, #e4e7ed);
}

/* 卡片动画 */
.animate-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* 欢迎卡片 */
.welcome-card {
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-icon {
  color: var(--el-color-primary);
  font-size: 24px;
}
.header-title {
  font-size: 20px;
  font-weight: bold;
  background: linear-gradient(90deg, var(--el-color-primary), #67c23a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 轮播卡片内容 */
.carousel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 140px;
  text-align: center;
}
.carousel-card .emoji {
  font-size: 28px;
  margin-bottom: 8px;
}
.carousel-card .title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.carousel-card .desc {
  font-size: 14px;
  color: #606266;
}

/* 技术栈卡片 */
.tech-row { margin-bottom: 24px; }
.tech-card { border-radius: 14px; padding: 16px; text-align: center; }
.tech-title { font-weight: 600; color: var(--el-color-primary); margin-bottom: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tech-tag {
  padding: 4px 12px;
  background: #f0f2f5;
  border-radius: 20px;
  font-size: 13px;
  color: #606266;
  transition: 0.3s;
}
.tech-tag:hover { background: var(--el-color-primary); color: #fff; }

/* 核心能力模块 */
.feature-row { margin-top: 16px; }
.feature-card {
  border-radius: 14px;
  text-align: center;
  padding: 24px 16px;
  transition: all 0.3s;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.icon-circle {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #67c23a, var(--el-color-primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-icon { font-size: 28px; color: #fff; }
.feature-title { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.feature-desc { font-size: 13px; color: #909399; }
</style>
